<script setup>import Left from '@/layout/Left.vue'
import Header from '@/layout/Header.vue'
import Footer from '@/layout/Footer.vue'
</script>

<template>
  <div class="holy-grail">
    <!-- 头部 -->
    <Header />

    <!-- 内容包装器 -->
    <div class="content-wrapper">
      <!-- 左侧边栏 -->
      <Left class="left-sidebar" />

      <!-- 主要内容 -->
      <main class="main-content">
        <router-view />
      </main>
    </div>

    <!-- 底部 -->
    <Footer />
  </div>
</template>


<style scoped>
.holy-grail {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content-wrapper {
  display: flex;
  flex: 1;
  padding: 20px;
}

.left-sidebar {
  width: 200px;
  background-color: #f4f4f4;
  padding: 15px;
  margin-right: 20px;
}

.main-content {
  flex: 1;
  background-color: #fff;
  padding: 15px;
}



</style>
